<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>青春花语--线上购花网</title>
    <link rel="stylesheet" href="./CSS/index.css">
    <link rel="stylesheet" href="./CSS/public.css">
    <script src="./js/index.js"></script>
</head>
<body>
    <!-- 头部导航 -->
    <div class="top-nav">
        <ul>
            <li><a href="./index.html"><span>|</span>青春花语首页<span>|</span></a></li>
            <li><a href="./HTML/shopping_mall.html"><span>|</span>商城<span>|</span></a>
            </li>
            <li><a href="./HTML/collect.html"><span>|</span>商品收藏<span>|</span></a>
            </li>
            <li><a href="./HTML/contact.html"><span>|</span>联系客服<span>|</span></a>
            </li>
            <li><a href="./HTML/login.html"><span>|</span>欢迎登录青春花语<span>|</span></a>
            </li>
            <li><a href="./HTML/register.html"><span>|</span>免费注册<span>|</span></a>
            </li>
            <li><a href="./HTML/person.html"><span>|</span>个人资料<span>|</span></a>
            </li>
            <li><a href="./HTML/my_order.html"><span>|</span>我的订单<span>|</span></a>
            </li>
        </ul>
    </div>
    <div class="header w">
        <!-- 网站logo -->
        <div class="logo">
            <img src="./images/logo.jpg" width="120px" height="100px" alt="">
        </div>
        <!-- 搜索 -->
        <div class="search">
            <input type="text" placeholder="请输入你的关键词">
            <button><img src="./images/btn1.jpg" alt="" width="50px" height="50px"></button>
        </div>
        <!-- 购物车 -->
        <div class="car">
            <img src="./images/car1.jpg" width="45px" height="45px" alt="">
            <a href="./HTML/shoppingcar.html">购物<br>车</a>
        </div>
        <!-- 导航 -->
        <div class="nav">
            <ul>
                <li><a href="https://baike.baidu.com/item/%E7%8E%AB%E7%91%B0/63206" target="_blank">玫瑰</a></li>
                <li><a href="https://baike.baidu.com/item/%E9%83%81%E9%87%91%E9%A6%99/13506" target="_blank">郁金香</a></li>
                <li><a href="https://baike.baidu.com/item/%E7%99%BE%E5%90%88/7886" target="_blank">百合花</a></li>
                <li><a href="https://baike.baidu.com/item/%E5%85%B0%E8%8A%B1/15278221" target="_blank">兰花</a></li>
                <li><a href="https://baike.baidu.com/item/%E8%8D%89%E6%9C%AC%E8%8A%B1%E5%8D%89/156433" target="_blank">草本花卉</a></li>
                <li><a href="https://baike.baidu.com/item/%E7%B4%AB%E7%BD%97%E5%85%B0/5033" target="_blank">紫罗兰</a></li>
                <li><a href="https://baike.baidu.com/item/%E5%BA%B7%E4%B9%83%E9%A6%A8/34029" target="_blank">康乃馨</a></li>
                <li><a href="https://baike.baidu.com/item/%E8%8F%8A%E8%8A%B1/29500" target="_blank">菊花</a></li>
                <li><a href="https://baike.baidu.com/item/%E8%8C%89%E8%8E%89%E8%8A%B1/4951" target="_blank">茉莉花</a></li>
                <li><a href="https://baike.baidu.com/item/%E6%A2%85/5615328" target="_blank">梅花</a></li>
            </ul>
        </div>
        <!-- 轮播图 -->
        <div class="slider">
            <button class="prev"><</button>
            <div id="box">
            <img src="./images/l1.jpg" alt="" class="cur"/>
            <img src="./images/l2.jpg" alt="" class="cur"/>
            <img src="./images/l3.jpg" alt="" class="cur"/>
            <img src="./images/l4.jpg" alt="" class="cur"/>
            <img src="./images/l5.jpg" alt="" class="cur"/>
            <ul>
            <li class="bg_red"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            </ul>
            </div>
            <button class="next">></button>
            </div>
        <!-- 秒杀 -->
        <div class="container">
        <!-- 倒计时 -->
        <div class="timeDown-box" style="width: 370px;height: 555px;">
            <div class="text1">☆花束☆<br>限时秒杀</div>
            <div class="text2">18:00点场 还剩下</div>
            <div class="timeDown" style="position: relative;">
                <span id="box1"></span><!-- 时 -->
                <span id="box2"></span><!--分 -->
                <span id="box3"></span><!--秒 -->
                <i style="left: 65px;top: 36px;"></i>
                <i style="left: 65px;top: 23px;"></i>
                <i style="left: 127px;top: 36px;"></i>
                <i style="left: 127px;top: 23px;"></i>
            </div>
            <div class="text3">♥特价花束♥<br>♥限时秒杀♥<br>♥先到先得♥<br>♥过时不候♥<br>♥机会不多♥<br>♥快来选购♥</div>
        </div>
        <div id = "timer"></div>
        <!-- 商品列表 -->
        <div class="product">
            <ul>
                <li>
                    <a href="./HTML/pic_big.html">
                        <img src="./images/s1.jpg" width="220px" height="180px" alt="">
                        <h4>  星河璀璨 </h4>
                        <p> <span>¥168.88</span>  起☆</p>
                    </a>
                </li> 
                <li>
                    <a href="./HTML/pic_big.html">
                        <img src="./images/s2.jpg" width="220px" height="180px" alt="">
                        <h4>  金色暖阳 </h4>
                        <p> <span>¥384.68</span>  起☆</p>
                    </a>
                </li> 
                <li>
                    <a href="./HTML/pic_big.html">
                        <img src="./images/s3.jpg" width="220px" height="180px" alt="">
                        <h4>  爱情-星辰大海 </h4>
                        <p> <span>¥298.77</span>  起☆</p>
                    </a>
                </li> 
                <li>
                    <a href="./HTML/pic_big.html">
                        <img src="./images/s4.jpg" width="220px" height="180px" alt="">
                        <h4>  爱情-love </h4>
                        <p> <span>¥346.58</span>  起☆</p>
                    </a>
                </li>
                <li>
                    <a href="./HTML/pic_big.html">
                        <img src="./images/s5.jpg" width="220px" height="180px" alt="">
                        <h4>  爱你如初 </h4>
                        <p> <span>¥384.68</span>  起☆</p>
                    </a>
                </li> 
                <li>
                    <a href="./HTML/pic_big.html">
                        <img src="./images/s6.jpg" width="220px" height="180px" alt="">
                        <h4>  一路向阳 </h4>
                        <p> <span>¥384.68</span>  起☆</p>
                    </a>
                </li> 
                <li>
                    <a href="./HTML/pic_big.html">
                        <img src="./images/s7.jpg" width="220px" height="180px" alt="">
                        <h4>  香妃 </h4>
                        <p> <span>¥384.68</span>  起☆</p>
                    </a>
                </li> 
                <li>
                    <a href="./HTML/pic_big.html">
                        <img src="./images/s8.jpg" width="220px" height="180px" alt="">
                        <h4>  乘风破浪 </h4>
                        <p> <span>¥384.68</span>  起☆</p>
                    </a>
                </li> 
            </ul> 
        </div>
        </div>
        <!-- 页面底部说明 -->
        <div class="footer">
            <div class="w">
                 <div class="footer-l"><!--左边底部 -->
                    <img src="./images/logo.jpg" width="120px" height="80px" alt="">
                    <p>网上鲜花购买平台，让烂漫传递更方便~~~ <br>
                        © 2024年饶楷青.保留所有权利</p>
    
                    <a href="#" class="download">
                        下载APP<br>微信扫码登录
                    </a>
                </div>    
        <div class="footer-r"><!--右边底部 -->
            <dl>
                <dt>关于青春花语</dt>
                <dd><a href="#">关于</a></dd>
                <dd><a href="#">联系电话</a></dd>
                <dd><a href="#">工作机会</a></dd>
                <dd><a href="#">客户服务</a></dd>
                <dd><a href="#">帮助</a></dd>
            </dl>
            <dl>
                <dt>同城鲜花专区</dt>
                <dd><a href="#">深圳鲜花</a></dd>
                <dd><a href="#">广州鲜花</a></dd>
                <dd><a href="#">上海鲜花</a></dd>
                <dd><a href="#">北京鲜花</a></dd>
                <dd><a href="#">天津鲜花</a></dd>
                <dd><a href="#">重庆鲜花</a></dd>
                <dd><a href="#">更多鲜花</a></dd>
            </dl>
            <dl>
                <dt>新手指南</dt>
                <dd><a href="#">如何注册</a></dd>
                <dd><a href="#">如何登录</a></dd>
                <dd><a href="#">如何售后</a></dd>
                <dd><a href="#">怎么联系客服</a></dd>
                <dd><a href="#">怎么加入购物车或者收藏鲜花</a></dd>
            </dl>
            <dl>
                <dt>合作伙伴</dt>
                <dd><a href="#">合作网站</a></dd>
                <dd><a href="#">合作公司</a></dd>
                <dd><a href="#">合作平台</a></dd>
            </dl>
        </div>
    </div>
        </div>
        <!-- 浮动广告 -->
        <div id="ad-container" class="floating-ad">  
            <img src="./images/g1.jpg" alt="Advertisement">  
            <button class="close-btn" onclick="hideAd()">×</button>  
        </div> 
    </div>
    <!-- 一键换肤按钮 -->  
    <button id="skinToggleBtn" class="skin-toggle-btn"><img src="./images/a1.jpg" alt="" 
        style="width: 65px;height: 50px;"></button>  
    <!-- 隐藏的换肤列表 -->  
    <ul id="skinSelector" class="box hidden">  
        <li><img src="./images/h1.jpg" alt="壁纸1"></li>  
        <li><img src="./images/h2.jpg" alt="壁纸1"></li>  
        <li><img src="./images/h3.jpg" alt="壁纸1"></li>
        <li><button id="cancelSkinBtn" class="cancel-skin-btn">取消换肤</button></li>    
    </ul>  
</div>
</body>
</html>